<template>
  <div>
    <div class="cleaning_1">
      <div>
        <div style="position: absolute; top: 14px; left: 5px; color: #fff">
          <van-icon
            name="arrow-left"
            color="#ffffff"
            size="24"
            @click="back"
          ></van-icon>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            height: 75px;
            letter-spacing: 5px;
          "
        >
          每周接龙统计
        </div>
      </div>
      <van-tabs
        class="van_tab"
        lineColor="#ffffff"
        :scrollable="false"
        :list="tabList"
        @click="tabChange"
        title-active-color="#ffffff"
        title-inactive-color="#ffffff"
        background="none"
      >
        <van-tab
          :title="item.name"
          v-for="item in tabList"
          :key="item.name"
        ></van-tab>
      </van-tabs>
      <div class="list_outside">
        <div class="list">
          <div class="list_head">
            <div style="width: 80%; display: flex; align-items: center">
              <van-icon name="calendar-o" color="#A6A6A6" size="20"></van-icon>
              <div style="margin: 5px">
                {{
                  timeValue[0] ? timeValue[0] + " 至 " + timeValue[1] : "请选择"
                }}
              </div>
            </div>
            <div>
              <van-icon
                @click="timeShow = true"
                name="calendar"
                color="#A6A6A6"
                size="28"
              ></van-icon>
            </div>
          </div>
          <div class="list_team">
            <div
              class="li"
              v-if="JYdata.length"
              v-for="(item, index) in JYdata"
              :key="index"
            >
              <div
                class="list_item"
                style="background-color: #e6f1ff"
                v-if="index % 3 == 0"
              >
                <span class="WZ_size_10"> {{ item.mealName }}</span>
                <div style="padding-top: 5px">{{ item.totalQuantity }}</div>
                <van-image
                  class="img"
                  width="35px"
                  height="35px"
                  :src="require('../../../../../static/JYSJ/DDZS.png')"
                  mode="widthFix"
                ></van-image>
              </div>
              <div
                class="list_item"
                style="background-color: #e5e5e5"
                v-else-if="index % 3 == 1"
              >
                <span class="WZ_size_10"> {{ item.mealName }}</span>
                <div style="padding-top: 5px">{{ item.totalQuantity }}</div>
                <van-image
                  class="img"
                  width="35px"
                  height="35px"
                  :src="require('../../../../../static/JYSJ/YQX.png')"
                  mode="widthFix"
                ></van-image>
              </div>
              <div class="list_item" style="background-color: #eaf5f6" v-else>
                <span class="WZ_size_10"> {{ item.mealName }}</span>
                <div style="padding-top: 5px">{{ item.totalQuantity }}</div>
                <van-image
                  class="img"
                  width="35px"
                  height="35px"
                  :src="require('../../../../../static/JYSJ/YWC.png')"
                  mode="widthFix"
                ></van-image>
              </div>
            </div>
          </div>

          <div class="list_background">
            <van-image
              class="img"
              width="250px"
              height="250px"
              :src="require('../../../../../static/JYSJ/BJ.png')"
              mode="widthFix"
            ></van-image>
          </div>
        </div>
      </div>
      <van-calendar
        closeOnClickOverlay
        v-model="timeShow"
        type="range"
        @confirm="confirm"
        @close="timeShow = false"
        color="#00BAAD"
        :min-date="minDate"
        :max-date="maxDate"
        :allow-same-day="true"
        :max-range="180"
      ></van-calendar>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { queryMealCount } from "@/api/realAssets/icsharedstation/CPXX/index.js";
import {
  getpersonalInformation,
  setpersonalInformation,
} from "../../../../../common/RYXX";
export default {
  data() {
    return {
      title: "订单管理",
      total: 0,
      JYdata: [],
      orderStatus: "-1,1",
      postId: JSON.parse(getpersonalInformation()).postId,
      orderNumber: "",
      timeValue: [],
      CPGLxx: JSON.parse(localStorage.getItem("CPGLxx")),
      siteData: JSON.parse(localStorage.getItem("siteData")),
      timeShow: false,
      today: "",
      sevenDaysAgo: "",
      monthAgo: "",
      frontTime: "",
      backTime: "",
      minDate: new Date(moment().year(), 0, 1),
      maxDate: new Date(moment().year(), 11, 31),
      tabList: [
        {
          name: "7日内",
          day: "7",
        },
        {
          name: "30日内",
          day: "30",
        },
        {
          name: "自定义",
          day: "",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.frontTime = moment().subtract(7, "days").format("YYYY-MM-DD");
    this.backTime = moment().format("YYYY-MM-DD");
    this.timeValue = [this.frontTime, this.backTime];
    console.log(this.timeValue);
    this.getLB();
  },
  methods: {
    confirm(e) {
      this.timeShow = false;
      this.frontTime = moment(e[0]).format("YYYY-MM-DD");
      this.backTime = moment(e[1]).format("YYYY-MM-DD");
      this.timeValue = [this.frontTime, this.backTime];
      this.getLB();
    },
    back() {
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_indexbrn",
      });
    },
    tabChange(item) {
      if (this.tabList[item].day.length) {
        this.frontTime = moment()
          .subtract(this.tabList[item].day, "days")
          .format("YYYY-MM-DD");
        this.backTime = moment().format("YYYY-MM-DD");
        this.timeValue = [this.frontTime, this.backTime];
        this.getLB();
      } else {
        this.timeShow = true;
      }
    },
    getLB() {
      //获取菜单列表
      queryMealCount({
        siteId: this.siteData.id,
        companyId: this.CPGLxx.id,
        frontTime: this.frontTime,
        backTime: this.backTime,
      })
        .then((resXX) => {
          this.JYdata = resXX.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../../../static/css/index.less";
.cleaning_1 {
  height: 100vh;
  width: 100%;
  background: url("../../../../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.list {
  height: calc(
    var(--real-vh, 1vh) * 100 - 130px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
  overflow-x: auto;
}
.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  height: calc(
    var(--real-vh, 1vh) * 100 - 100px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
  box-sizing: border-box;
  .list {
    // display: flex;
    position: relative;
    .list_team {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: left;
      padding: 0 20px;
      margin-top: 10px;
      z-index: 10;
      .li {
        width: 28%;
        // height: 100px;
        z-index: 10;
        margin: 0 8px;
        margin-bottom: 10px;
        //   display: flex;
        //   flex-direction: column;
        //   justify-content: center;
        // align-items: center;
        // text-align: center;
        //   height: 75px;
        font-size: 12px;
        border-radius: 5px;
        position: relative;
      }
      div {
        font-size: 14px;
        color: black;
        font-weight: 600;
      }
      .img {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .list_item {
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // text-align: center;
        height: 75px;
        width: 100%;
        font-size: 12px;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 18px;
          color: black;
          font-weight: 600;
        }
        .img {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
    .list_background {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      //   width: 100%;
      //   height: 320px;
    }
  }
}
.list_head {
  margin-top: 10px;
  color: #999999;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  // padding-left: 40px;
}
.van_tab {
  --van-tabs-bottom-bar-color: #00baad;
}
</style>